﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="detail.aspx.cs" Inherits="JYJJ.Web.Pages.detail" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>捐赠详情</title>
    <link href="../js/layui/css/layui.css" rel="stylesheet" />
    <link href="../css/base_siva.css" rel="stylesheet" type="text/css" />
    <link href="../css/reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/pagination.css" rel="stylesheet" />
    <script type="text/javascript" src="../js/jquery.js"></script>

    <script type="text/javascript">
        var cms_home = "<%=Utility.Config.ConfigHelper.WebHomeAddress_CMS%>";
    </script>
</head>
<body>
    <div class="bgmain_detail clear">
        <div class="bg_proj">
            <div class="proj_main">
                <div class="proj_main_L">
                    <div class="image">
                        <asp:Image ID="imgUrl" runat="server" BorderStyle="None" />
                        <%--<img src="../images/img_donate_details.png" alt="" />--%>
                    </div>
                </div>
                <div class="proj_main_R">
                    <div class="title">
                        <asp:Literal ID="ltTitle" runat="server"></asp:Literal>
                    </div>
                    <div class="introduction">
                        <asp:Literal ID="ltDesc" runat="server"></asp:Literal>
                        <%--<p>岁月沧桑、激扬前行，不忘初心，不负使命，母校明天，有你有我！</p>--%>
                    </div>
                    <div class="progressBorder1"></div>
                    <div class="progress_info">
                        <div class="progress_info_L">目标金额：<b>￥<asp:Literal ID="ltMBJE" runat="server"></asp:Literal></b> 元</div>

                        <div class="progress_info_R">
                            <i>
                                <asp:Literal ID="ltSFJX" runat="server"></asp:Literal></i>&nbsp;&nbsp;距离 <b>
                                    <asp:Literal ID="ltJSRQ" runat="server"></asp:Literal></b>
                            <asp:Literal ID="ltSYSJ" runat="server"></asp:Literal>
                        </div>

                    </div>
                    <div class="progress_bar_D"><span id="sp_wcbl"></span></div>
                    <script type="text/javascript">
                        var wcd = "<%=WCBL%>";
                        //$("#sp_wcbl").attr("width", wcd+"%");
                        $("#sp_wcbl").css("width", wcd + "%")
                    </script>
                    <div class="progress_info">
                        <div class="progress_info_L">获得捐赠：<b>￥<asp:Literal ID="ltHDJE" runat="server"></asp:Literal></b> 元</div>
                        <div class="progress_info_R">完成度：<b><%=WCBL%></b>%</div>
                    </div>
                    <div class="progressBorder2"></div>
                    <form name="detail" id="detail" action="info.aspx">
                        <div class="num">
                            <input type="hidden" name="Choice" id="Choice" />
                            <div class="numSelect">
                                <span>捐赠选项：</span> <span class="select">
                                    <a href="javascript:;" onclick="setOption(this,'100','100','','份');">100</a> <a href="javascript:;" onclick="setOption(this,'1','1','','份');">1</a> <a href="javascript:;" onclick="setOption(this,'0','','','');">任意捐 </a>
                                </span>
                            </div>
                            <div class="numIn" id="numInCount" style="display: none;">
                                捐赠数量：
                            <input type="text" id="count" value="1" maxlength="10" name="count" />
                                <span name="unit">份</span> &nbsp;&nbsp;（<b><span id="single"></span> 元/<span name="unit">份</span>，1 <span name="unit">份</span>起<span id="lastSpan">，剩余 <span id="last"></span><span name="unit">份</span></span></b>） <b name="orderNotice"></b>
                            </div>
                            <div class="numIn" id="numInAmout" style="display: none;">
                                捐赠金额：
                            <input type="text" id="amount" name="amount" value="1" maxlength="10" />
                                元&nbsp;&nbsp;
                            （<b>1 元起</b>） <b name="orderNotice"></b>
                            </div>
                            <div class="pay">
                                <span>捐赠方式：</span> <span class="select"><a href="javascript:;" paytype="0" class="payOption">
                                    <img alt="" src="../images/payAlipay.png"></a> <a href="javascript:;" paytype="1" class="payOption">
                                        <img alt="" src="../images/payWeixin.png" /></a> </span>
                                <input type="hidden" name="PayType" id="PayType" />
                            </div>
                        </div>
                        <div class="opt">
                            <a href="javascript:;" id="aSubmit" name="submit" runat="server">立即捐赠</a>
                        </div>
                        <input type="hidden" name="donateId" id="donateId" runat="server" />
                    </form>
                    <div class="memo">感谢您的大力支持，学校会认真负责地用好每一笔捐赠！</div>
                    <script type="text/javascript">

                        function showMsg(Msg) {
                            layer.open({
                                type: 1
                               , offset: 'auto'
                               , id: 'layerDemo1'
                               , content: '<div style="padding: 20px 100px;">' + Msg + '</div>'
                               , btn: '关闭'
                               , btnAlign: 'c' //按钮居中
                               , shade: 0.5 //不显示遮罩
                               , yes: function () {
                                   layer.closeAll();
                               }
                            });
                        }

                        $(document).ready(function () {
                            $('#aSubmit').click(function () {
                                var msg = $('[name="orderNotice"]').html();
                                if (msg.indexOf("错误") >= 0) {
                                    showMsg('请输入正确的格式');
                                    return false;
                                }

                                var payType = $("#PayType").val();
                                var pay = $(".payOptionOn");
                                if (pay.length == 0) {
                                    showMsg('请选选择捐赠方式');
                                    return false;
                                }
                                if (payType == "") {
                                    showMsg('请选选择捐赠方式');
                                    return false;
                                }
                                document.getElementById('detail').submit();
                            });
                            $('.payOption').click(function () {
                                var obj = $(this);
                                if (!obj.hasClass('payOptionOn')) {
                                    $('.payOptionOn').removeClass('payOptionOn');
                                    obj.addClass('payOptionOn');
                                    $('#PayType').val(obj.attr('payType'));
                                }
                            });

                            $('#count').live('keydown', function () {
                                // 份数
                                var obj = $(this);
                                if (obj.val() == '') {
                                    $('[name="orderNotice"]').html('<span style="color:#ff0000;">请输入捐赠份数</span>');
                                } else if (!/^\d+$/.test(obj.val())) {
                                    $('[name="orderNotice"]').html('<span style="color:#ff0000;">捐赠份数格式错误</span>');
                                } else {
                                    var count = parseInt(obj.val());
                                    var single = parseFloat($('#single').text());
                                    $('[name="orderNotice"]').html('总金额 ' + (Math.round(single * count * 100) / 100) + ' 元');
                                }
                            }).live('keypress', function () {
                                $(this).keydown();
                            }).live('keyup', function () {
                                $(this).keydown();
                            }).live('focus', function () {
                                $(this).keydown().select();
                            }).live('blur', function () {
                                $(this).keydown();
                            });
                            $('#amount').live('keydown', function () {
                                // 任意捐金额
                                var obj = $(this);
                                if (obj.val() == '') {
                                    $('[name="orderNotice"]').html('<span style="color:#ff0000;">请输入捐赠金额</span>');
                                } else if (!/^\d+(.\d{0,2})?$/.test(obj.val())) {
                                    $('[name="orderNotice"]').html('<span style="color:#ff0000;">捐赠金额格式错误</span>');
                                } else {
                                    $('[name="orderNotice"]').html('');
                                }
                            }).live('keypress', function () {
                                $(this).keydown();
                            }).live('keyup', function () {
                                $(this).keydown();
                            }).live('focus', function () {
                                $(this).keydown().select();
                            }).live('blur', function () {
                                $(this).keydown();
                            });
                            // 默认选中第一个捐赠选项
                            $('.select a:first').click();
                        });

                        function setOption(obj, option, single, lastCount, unitCount) {
                            $(obj).parent().find('.on').removeClass('on');
                            $(obj).addClass('on');
                            $('#Choice').val(option);
                            $('#option').val(option);
                            $('#single').text(single);
                            $('#last').text(lastCount);
                            $('span[name="unit"]').text(unitCount);
                            if (lastCount == '') {
                                $('#lastSpan').hide();
                            } else {
                                $('#lastSpan').show();
                            }
                            if (option != '') {
                                if (option == "0") {
                                    $('#numInCount').hide();
                                    $('#numInAmout').show();
                                    $('#amount').focus();
                                }
                                else {
                                    $('#numInCount').show();
                                    $('#numInAmout').hide();
                                    var count = parseInt($('#count').val());
                                    if (isNaN(count)) {
                                        count = 1;
                                    }
                                    $('#count').val(count).focus();
                                }
                            }
                            else {
                                $('#numInCount').hide();
                                $('#numInAmout').show();
                                $('#amount').focus();
                            }
                        }
                    </script>
                </div>
            </div>
        </div>
        <div class="proj_cnt">
            <div class="proj_cnt_menu">
                <div class="bg"></div>
                <div class="main">
                    <a href="javascript:;" class="on">项目详情</a> <a href="javascript:;">具体事项</a> <a href="javascript:;">常见问题</a> <a href="javascript:;" id="aJZJL">捐赠记录</a>
                    <script type="text/javascript">
                        $(document).ready(function () {
                            $('.proj_cnt_menu a').click(function () {
                                var obj = $(this);
                                if (!obj.hasClass('on')) {
                                    var index = obj.prevAll().length;
                                    $('.proj_cnt_menu a').removeClass('on').eq(index).addClass('on');
                                    $('.proj_cnt_main').hide().eq(index).show();
                                }
                            });
                        });
                    </script>
                </div>
            </div>
            <div class="proj_cnt_main">
                <asp:Literal ID="ltText_XMXQ" runat="server"></asp:Literal>
            </div>
            <div class="proj_cnt_main" style="display: none;">
                <asp:Literal ID="ltText_JTXS" runat="server"></asp:Literal>
            </div>
            <div class="proj_cnt_main" style="display: none;">
                <asp:Literal ID="ltText_CJWT" runat="server"></asp:Literal>
            </div>
            <div class="proj_cnt_main" style="display: none;">
                <div class="wrap_table_1">
                    <table class="table_B" id="table_B">
                        <tbody>
                            <tr>
                                <th>捐赠人</th>
                                <th>捐赠选项</th>
                                <th>金额</th>
                                <th>捐赠时间<%--&nbsp;(&nbsp;<a class="on" href="#">顺序</a>&nbsp;|&nbsp;<a href="#">倒序</a>&nbsp;)--%></th>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="m-style" style="width: 1000px; margin: 0 auto;">
                    <div class="pageinfo" style="text-align: center;"></div>
                </div>
                <script type="text/javascript">
                    var pIndex = 1;
                    var pageSize = 10;
                    $(document).ready(function () {
                        DataBind();
                    });
                    function DataBind() {
                        $.ajax({
                            type: "GET",
                            url: "../Handlers/Handlers_Order.ashx?methon=getorder",
                            data: "donateId=" + $("#donateId").val() + "&pageIndex=" + pIndex + "&pageSize=" + pageSize,
                            success: function (json) {
                                var jsonData = eval("(" + json + ")");
                                if (jsonData.State == "true") {
                                    var strSql = "";
                                    var data = eval("(" + jsonData.RetData + ")");
                                    $.each(data, function (index, item) {
                                        strSql += "<tr>";
                                        if (item.UserId == "0") {
                                            strSql += "<td>匿名</td>";
                                        }
                                        else {
                                            strSql += "<td>" + item.name + "</td>";
                                        }
                                        if (item.choice == 0) {
                                            strSql += "<td>任意捐</td>";
                                        }
                                        else {
                                            strSql += "<td>" + item.num + " × " + item.amount + "</td>";
                                        }
                                        strSql += "<td>" + item.payMoney + "元</td><td>" + item.createDate + "</td></tr>";
                                        //console.log(item);
                                    });


                                    $("#table_B tr:gt(0)").remove(); //移除第一个以后的所有否则会累加 
                                    $("#table_B").append(strSql); //往其中增加内容   
                                    BindPage(jsonData.RetCode);
                                }
                                else {
                                    jBox.tip("获取数据，请重新再试！" + jsonData.Message, 'error');
                                }
                            },
                            error: function (error) {

                            },
                            complete: function (XMLHttpRequest, textStatus) {

                            }
                        });
                    }





                    function BindPage(rowCount) {
                        $("#aJZJL").html("捐赠记录（" + rowCount + "）");
                        $('.pageinfo').pagination({
                            totalData: rowCount,
                            showData: pageSize,
                            current: pIndex,
                            jump: false,
                            coping: true,
                            homePage: '首页',
                            endPage: '末页',
                            prevContent: '上页',
                            nextContent: '下页',
                            callback: function (api) {
                                pIndex = api.getCurrent();
                                DataBind();
                            }
                        });
                    }
                </script>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            var height = document.documentElement.scrollHeight
                 || document.body.scrollHeight
                 || 0;
            var iframe = $('<iframe height="0" width="0" style="display: none;">');
            $('body').append(iframe);
            iframe.attr('src', cms_home + "auxiliarypage.html#" + (height > 800 ? height : 800));
        });
    </script>

    <script src="../js/jquery.pagination.js"></script>
    <script src="../js/layui/layui.all.js"></script>
</body>
</html>
